/* 全局卡通风主题 */
:root {
	--ctn-primary: #ff7ac3;
	--ctn-secondary: #7ad3ff;
	--ctn-accent: #ffd166;
	--ctn-success: #4cd964;
	--ctn-info: #6c63ff;
	--ctn-danger: #ff6b6b;
	--ctn-bg: #fff8fb;
	--ctn-card: #ffffff;
	--ctn-shadow: 0 10px 20px rgba(0,0,0,0.08);
	--ctn-radius: 18px;
	--ctn-radius-sm: 14px;
	--ctn-radius-lg: 26px;
}

html, body, #app {
	background: linear-gradient(180deg, #fff8fb 0%, #f7fbff 100%);
}

/* 卡通标题字体与跳动动画 */
.ctn-title {
	font-weight: 800;
	letter-spacing: 0.5px;
	text-shadow: 0 3px 0 rgba(0,0,0,0.06);
}

.ctn-bubble {
	background: var(--ctn-card);
	border-radius: var(--ctn-radius);
	box-shadow: var(--ctn-shadow);
	border: 3px solid rgba(0,0,0,0.04);
}

.ctn-chip {
	background: rgba(255,255,255,0.9);
	border-radius: 999px;
	padding: 4px 10px;
	box-shadow: 0 6px 12px rgba(0,0,0,0.06);
}

.ctn-card {
	background: var(--ctn-card);
	border-radius: var(--ctn-radius);
	box-shadow: var(--ctn-shadow);
	border: 3px solid rgba(0,0,0,0.04);
}

.ctn-btn-primary {
	background: var(--ctn-primary) !important;
	border-color: var(--ctn-primary) !important;
	color: #fff !important;
	border-width: 2px !important;
	border-radius: 16px !important;
}

.ctn-btn-success { background: var(--ctn-success) !important; color: #fff !important; border-radius: 16px !important; }
.ctn-btn-info { background: var(--ctn-info) !important; color: #fff !important; border-radius: 16px !important; }
.ctn-btn-danger { background: var(--ctn-danger) !important; color: #fff !important; border-radius: 16px !important; }

/* Element Plus 微调以卡通风格 */
.el-card, .leaderboard-container, .info-card, .action-card, .feature-card, .game-instructions {
	border-radius: var(--ctn-radius) !important;
	box-shadow: var(--ctn-shadow) !important;
	border: 3px solid rgba(0,0,0,0.04) !important;
}

.el-button--primary { background-color: var(--ctn-primary); border-color: var(--ctn-primary); }
.el-button--success { background-color: var(--ctn-success); border-color: var(--ctn-success); }
.el-button--warning { background-color: var(--ctn-accent); border-color: var(--ctn-accent); color: #5e4b00; }
.el-button--danger { background-color: var(--ctn-danger); border-color: var(--ctn-danger); }
.el-button--info { background-color: var(--ctn-info); border-color: var(--ctn-info); }

.leaderboard-item {
	border-width: 3px !important;
}

.rank {
	box-shadow: inset 0 -3px 0 rgba(0,0,0,0.12);
}

.player-color, .avatar-color {
	border-width: 3px !important;
}

.game-container .game-header, .game-container .info-card, .game-container .game-instructions {
	background: linear-gradient(180deg, #ffffff 0%, #fffafd 100%);
}

.room-code {
	background: #ffe6f4 !important;
	border: 2px dashed rgba(255,122,195,0.6);
}

.ranking-position, .stat-rank {
	box-shadow: var(--ctn-shadow);
	border: 2px solid rgba(0,0,0,0.06);
}

.dialog-footer .el-button {
	border-radius: 16px !important;
}

.board-section h4 {
	font-weight: 800;
	color: #ff6ea9;
}

.current-user {
	filter: saturate(1.1);
}

/* 小动效 */
.leaderboard-item:hover, .action-card:hover, .feature-card:hover {
	transform: translateY(-4px);
	transition: transform 0.15s ease;
}

/* 表单卡通主题 */
.ctn-form {
	--ctn-form-bg: #fff;
	--ctn-form-item-bg: #fff7fb;
	--ctn-form-border: rgba(0,0,0,0.06);
	--ctn-form-focus: rgba(255,122,195,0.55);
}

.ctn-form :deep(.el-form-item) {
	background: var(--ctn-form-item-bg);
	border: 3px solid var(--ctn-form-border);
	border-radius: 16px;
	padding: 10px 12px;
	margin-bottom: 14px;
	box-shadow: 0 8px 16px rgba(255, 122, 195, 0.06);
}

.ctn-form :deep(.el-form-item__label) {
	font-weight: 800;
	color: #ff6ea9;
	letter-spacing: 0.3px;
	/* 对齐图标与文字 */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.4;
}

.ctn-form :deep(.el-form-item__label .el-icon) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	font-size: 18px;
	vertical-align: middle;
	transform: translateY(1px);
}

.ctn-form :deep(.el-input__wrapper),
.ctn-form :deep(.el-select .el-input__wrapper) {
	border-width: 3px;
	border-radius: 14px;
	border-color: var(--ctn-form-border);
	box-shadow: inset 0 -3px 0 rgba(0,0,0,0.05);
}

.ctn-form :deep(.el-input__wrapper.is-focus),
.ctn-form :deep(.el-input.is-focus .el-input__wrapper),
.ctn-form :deep(.is-focus .el-input__wrapper) {
	border-color: var(--ctn-primary) !important;
	box-shadow: 0 0 0 4px var(--ctn-form-focus) !important;
}

.ctn-form :deep(.el-input__inner::placeholder) {
	color: #b98fb4;
}

.ctn-form :deep(.el-select .el-select__wrapper) {
	border-width: 3px;
	border-radius: 14px;
}

.ctn-form :deep(.el-slider__bar) {
	background-color: var(--ctn-primary);
}

.ctn-form :deep(.el-slider__button) {
	border-color: var(--ctn-primary);
	box-shadow: 0 6px 12px rgba(255,122,195,0.25);
}

.ctn-form :deep(.el-form-item.is-error .el-input__wrapper),
.ctn-form :deep(.el-form-item.is-error .el-select .el-input__wrapper) {
	border-color: var(--ctn-danger) !important;
	box-shadow: 0 0 0 4px rgba(255,107,107,0.35) !important;
}

.ctn-form :deep(.el-form-item__error) {
	font-weight: 700;
	color: var(--ctn-danger);
}

/* 输入框增强（卡通风） */
.ctn-form :deep(.el-input__wrapper) {
	padding: 8px 12px;
	background: linear-gradient(180deg, #fff 0%, #fff8fb 100%);
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ctn-form :deep(.el-input__wrapper:hover) {
	border-color: rgba(255,122,195,0.55);
	box-shadow: 0 6px 14px rgba(255,122,195,0.12), inset 0 -3px 0 rgba(0,0,0,0.04);
}

.ctn-form :deep(.el-input__wrapper.is-focus),
.ctn-form :deep(.el-input.is-focus .el-input__wrapper),
.ctn-form :deep(.is-focus .el-input__wrapper) {
	transform: translateY(-1px) scale(1.01);
}

.ctn-form :deep(.el-input__inner) {
	caret-color: var(--ctn-primary);
	font-weight: 600;
}

.ctn-form :deep(.el-input__suffix),
.ctn-form :deep(.el-input__prefix) {
	color: #b98fb4;
}

.ctn-form :deep(.el-input.is-disabled .el-input__wrapper) {
	background: #fafafa;
	border-color: rgba(0,0,0,0.05);
	box-shadow: none;
}

.ctn-form :deep(.el-input-group__append),
.ctn-form :deep(.el-input-group__prepend) {
	border-radius: 12px;
	border-width: 3px;
}

/* 选项卡卡通主题 */
.ctn-tabs .el-tabs__header {
	margin: 0 0 16px 0;
	border-bottom: none;
}

.ctn-tabs .el-tabs__nav-wrap {
	padding: 8px;
	background: linear-gradient(180deg, #fff7fb 0%, #fff 100%);
	border: 3px solid rgba(0,0,0,0.06);
	border-radius: 18px;
	box-shadow: 0 10px 18px rgba(255, 122, 195, 0.08);
	position: relative;
}

.ctn-tabs .el-tabs__nav-wrap::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 8px;
	width: 60px;
	height: 10px;
	background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.9), rgba(255,255,255,0));
	filter: blur(1px);
	pointer-events: none;
	border-radius: 999px;
}

.ctn-tabs .el-tabs__item {
	position: relative;
	border-radius: 14px !important;
	margin: 4px 8px;
	padding: 10px 16px;
	font-weight: 800;
	color: #8f5d7b;
	background: #fff;
	border: 2px solid rgba(0,0,0,0.04);
	box-shadow: inset 0 -3px 0 rgba(0,0,0,0.04);
	transition: transform 0.14s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ctn-tabs .el-tabs__item:hover {
	transform: translateY(-2px) scale(1.02);
	background: #ffeaf5;
	box-shadow: 0 8px 16px rgba(255,122,195,0.12);
}

.ctn-tabs .el-tabs__item.is-active {
	background: linear-gradient(180deg, #ffa7d7 0%, #ff7ac3 100%);
	color: #fff !important;
	box-shadow: 0 10px 20px rgba(255,122,195,0.30);
	border-color: rgba(255,122,195,0.6);
	transform: translateY(-2px) scale(1.04);
	text-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

.ctn-tabs .el-tabs__item.is-active::after {
	content: "";
	position: absolute;
	right: -6px;
	top: -6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, #fff, rgba(255,255,255,0) 60%), radial-gradient(circle at 70% 70%, rgba(255,255,255,0.8), rgba(255,255,255,0) 60%);
	filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
}

.ctn-tabs .el-tabs__active-bar {
	display: none;
}

.ctn-tabs :deep(.el-tabs__nav-scroll) {
	overflow: visible;
}


